
<template>
  <div class="police-config">
    <el-card>
      <div class="top-search">
        <el-form :model="queryParams" label-width="auto" :inline="true" ref="queryFormRef">
          <el-form-item label="报警等级" prop="amRank">
            <el-select v-model="queryParams.amRank" placeholder="报警等级" clearable style="width: 240px">
                <el-option v-for="dict in police_warn_level" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button plain @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table-top">
        <el-button type="primary" @click="handle_add" v-has-permi="['police:config:add']">增加</el-button>
        <!-- <el-button type="success" v-has-permi="['police:config:edit']"
        :disabled="ids.length > 1" @click="editFn">编辑</el-button> -->
        <el-button type="danger" v-has-permi="['police:config:remove']" :disabled="ids.length < 1"
         @click="handleDelete">删除</el-button>
        <el-button plain @click="upDataConfigFileFn">刷新配置文件</el-button>
      </div>

      <div class="table-content">
        <el-table ref="multipleTableRef" :data="tableData" border style="width: 100%" height="65vh"
        @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column property="amName" label="报警名称" align="center"/>
          <el-table-column property="amInfotitle" label="报警信息标题" align="center"/>
          <el-table-column property="amInfodis" label="报警信息描述" align="center"/>
          <el-table-column property="amDescription" label="监控报警描述"  align="center"/>
          <el-table-column property="amRank" label="报警等级"  align="center">
            <template #default="{row}">
              <dict-tag :options="police_warn_level" :value="row.amRank" />
            </template>
          </el-table-column>
          <el-table-column property="amExpression" label="报警表达式" width="120"  align="center"></el-table-column>
          <el-table-column property="amFor" label="间隔"  align="center"/>
          <el-table-column property="name" label="操作"  align="center">
            <template #default="{row}">
              <el-button v-has-permi="['police:config:remove']" 
              link type="danger" icon="Delete" @click="deleteFn([row.amId])">删除</el-button>
              <el-button v-has-permi="['police:config:edit']" 
              link type="primary" icon="EditPen" @click="editForm(row.amId)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
      </div>
      
    </el-card>

    <!-- 弹框 -->
    <el-drawer v-model="drawerFlag"  size="40%" :direction="'rtl'" :title="drawerTitle" :close-on-click-modal="false">
      <add-drawer v-model="form" ref="addFormRef" @resetForm="resetForm"></add-drawer>
      <template #footer>
        <div style="flex: auto">
          <el-button type="primary" @click="submit">确认</el-button>
          <el-button @click="drawerFlag = false">取消</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>
 
<script setup lang="ts">
import { ref, reactive, toRefs } from 'vue';
import { ElTable } from 'element-plus';
import AddDrawer from './AddDrawer.vue';

import { getConfigListAPI, deleteConfigAPI, getConfigInfoAPI, upDataConfigFileAPI } from "@/api/police/config/index"

const { proxy } = getCurrentInstance() as ComponentInternalInstance
const { police_warn_level } = toRefs<any>(proxy?.useDict("police_warn_level"));

const addFormRef = ref<typeof AddDrawer|null>(null)
  const queryFormRef = ref<ElFormInstance>();

const initForm = {
  amName:"",
  amDescription:"",
  amExpression:"",
  amThreshold:"",
  amInfotitle:"",
  amInfodis:"",
  amRank:"",
  amFor: "",
  amStatus: 0
}

const total = ref(1);
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    amRank: ""
  },
  drawerFlag: false, //抽屉
  drawerTitle: '',
  tableData:<any[]> [],
  form: {...initForm}
});
const { queryParams, drawerFlag, drawerTitle, tableData, form } = toRefs(data);

// 新增
const handle_add = () => {
  drawerFlag.value = true;
  drawerTitle.value = '添加报警配置';
};
 
let ids = ref<string[]>([])
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<any[]>([]);

const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val
  ids.value = val.map( item => item.amId )
};

function submit() {
  addFormRef.value?.submitForm()
}

function resetForm() {
  form.value={ ...initForm }
  drawerFlag.value = false
  getList()
}

const getList = async () => {
  const res = await getConfigListAPI(queryParams.value)
  console.log("获取到的列表", res)
  tableData.value = res.rows||[]
  total.value = res.total
};

/**刷新配置文件 */
async function upDataConfigFileFn() {
  const res = await upDataConfigFileAPI()
  if(res.code == 200) {
    ElMessage.success("配置刷新成功")
  } else {
    ElMessage.error(res.msg)
  }
}

async function editForm(id:string) {
  const res = await getConfigInfoAPI(id)
  if(res.code == 200) {
    form.value = res.data
    drawerTitle.value = "修改报警配置"
    drawerFlag.value = true
  }
}

function handleQuery() {
  getList()
}

function resetQuery() {
  queryFormRef.value?.resetFields();
  queryParams.value.pageNum = 1
  handleQuery()
}

function handleDelete() {
  deleteFn(ids.value)
}

function deleteFn(amIds:string[]) {
  ElMessageBox.confirm(
      `是否确认删除所选择的选项！`,
      '提示',
      {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      }
  )
      .then(async () => {
          const res = await deleteConfigAPI(amIds)
          if(res.code == 200) {
              ElMessage.success("删除成功！")
              getList()
          }
      })
      .catch(() => {
          ElMessage({
              type: 'info',
              message: '操作取消',
          })
      })
}

onMounted(()=>{
  getList()
})

</script>

<style scoped lang="scss">
.police-config {
  padding: 8px;
  width: 100%;
  height: 100%;
  .el-card {
    width: 100%;
    height: 100%;
    .table-top {
      margin-bottom: 20px;
    }
    .table-content {
      width: 100%;
    }
  }
}
</style>